<template>
  <a-spin :spinning="showSpin">
    <div class="main">
      <a-card title="最近一周访问量">
        <div style="height: 300px" ref="visitChartDiv"></div>
      </a-card>

      <a-row :gutter="[20, 20]">
        <a-col :sm="24" :md="24" :lg="12">
          <a-card title="热门视频排名" style="flex: 1">
            <div style="height: 300px" ref="barChartDiv"></div>
          </a-card>
        </a-col>
        <a-col :sm="24" :md="24" :lg="12">
          <a-card title="热门分类比例" style="flex: 1">
            <div style="height: 300px" ref="pieChartDiv"></div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import { InteractionOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';
  import { listApi } from '/@/api/overview';

  interface ChartData {
    visit_data: { day: string; uv: number; pv: number }[];
    order_rank_data: { title: string; count: number }[];
    classification_rank_data: { title: string; count: number }[];
  }

  const showSpin = ref(true);

  const visitChartDiv = ref<HTMLElement | null>(null);
  const barChartDiv = ref<HTMLElement | null>(null);
  const pieChartDiv = ref<HTMLElement | null>(null);

  let visitChart: echarts.ECharts | null = null;
  let barChart: echarts.ECharts | null = null;
  let pieChart: echarts.ECharts | null = null;

  const tdata = reactive({
    data: {} as ChartData,
  });

  onMounted(() => {
    list();
    window.onresize = function () {
      // resize
      visitChart?.resize();
      barChart?.resize();
      pieChart?.resize();
    };
  });

  const list = () => {
    listApi({})
      .then((res) => {
        console.log(res.data);
        tdata.data = res.data;
        initCharts();
        initBarChart();
        initPieChart();

        showSpin.value = false;
      })
      .catch(() => {
        showSpin.value = false;
      });
  };

  const initCharts = () => {
    const xData: string[] = [];
    const uvData: number[] = [];
    const pvData: number[] = [];
    tdata.data.visit_data.forEach((item, index) => {
      xData.push(item.day);
      uvData.push(item.uv);
      pvData.push(item.pv);
    });
    if (visitChartDiv.value) {
      visitChart = echarts.init(visitChartDiv.value);
      const option = {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['IP', 'visit'],
          top: '90%',
          left: 'center',
        },
        grid: {
          top: '30px',
          left: '20px',
          right: '20px',
          bottom: '40px',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#2F4F4F',
          },
          axisLine: {
            lineStyle: {
              color: '#2F4F4F',
            },
          },
          // boundaryGap: false,
          data: xData,
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: {
            show: true, // 网格线
            lineStyle: {
              color: 'rgba(10, 10, 10, 0.1)',
              width: 1,
              type: 'solid',
            },
          },
        },
        series: [
          {
            name: 'IP',
            type: 'line',
            stack: 'Total',
            data: uvData,
          },
          {
            name: 'visit',
            type: 'line',
            stack: 'Total',
            data: pvData,
          },
        ],
      };
      visitChart.setOption(option);
    }
  };

  const initBarChart = () => {
    const xData: string[] = [];
    const yData: number[] = [];
    tdata.data.order_rank_data.forEach((item, index) => {
      xData.push(item.title);
      yData.push(item.count);
    });
    // const xData = ['遥远的救世主', '平凡的世界', '测试书籍12', '测试书籍13', '测试书籍14', '测试书籍15', '测试书籍16', '测试书籍17']
    // const yData = [220, 200, 180, 150, 130, 110, 100, 80]
    if (barChartDiv.value) {
      barChart = echarts.init(barChartDiv.value);
      const option = {
        grid: {
          // 让图表占满容器
          top: '40px',
          left: '40px',
          right: '40px',
          bottom: '40px',
        },
        title: {
          text: '热门视频排名',
          textStyle: {
            color: '#aaa',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontSize: 18,
          },
          x: 'center',
          y: 'top',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          data: xData,
          type: 'category',
          axisLabel: {
            rotate: 30, // 倾斜30度,
            textStyle: {
              color: '#2F4F4F',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#2F4F4F',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: {
            show: true, // 网格线
            lineStyle: {
              color: 'rgba(10, 10, 10, 0.1)',
              width: 1,
              type: 'solid',
            },
          },
        },
        series: [
          {
            data: yData,
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  // 柱图颜色
                  return '#70B0EA';
                },
              },
            },
          },
        ],
      };
      barChart.setOption(option);
    }
  };

  const initPieChart = () => {
    const pieData: { name: string; value: number }[] = [];
    tdata.data.classification_rank_data.forEach((item, index) => {
      pieData.push({ name: item.title, value: item.count });
    });
    if (pieChartDiv.value) {
      pieChart = echarts.init(pieChartDiv.value);
      const option = {
        grid: {
          // 让图表占满容器
          top: '40px',
          left: '40px',
          right: '40px',
          bottom: '40px',
        },
        title: {
          text: '热门视频分类',
          textStyle: {
            color: '#aaa',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontSize: 18,
          },
          x: 'center',
          y: 'top',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '90%',
          left: 'center',
        },
        series: [
          {
            name: '分类',
            type: 'pie',
            itemStyle: {
              normal: {
                color: function (params: any) {
                  const colorList = ['#70B0EA', '#B3A3DA', '#88DEE2', '#62C4C8', '#58A3A1'];
                  return colorList[params.dataIndex - colorList.length];
                },
              },
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 20,
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: pieData,
            },
          },
        ],
      };
      pieChart.setOption(option);
    }
  };
</script>

<style lang="less" scoped>
  .main {
    height: 100%;
    display: flex;
    gap: 20px;
    flex-direction: column;

    .box {
      padding: 12px;
      display: flex;
      flex-direction: column;

      .box-top {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      .box-value {
        color: #000000;
        font-size: 32px;
        margin-right: 12px;

        .v-e {
          font-size: 14px;
        }
      }

      .box-bottom {
        margin-top: 24px;
        color: #000000d9;
      }
    }
  }
</style>
